import React,{PureComponent} from "react"
import {Button} from "antd-mobile"
import {isNull,filterTemplate} from "../../utils/helper"
import F2 from "@antv/f2/lib/index-all"
import getDataSource from "../MDatasource"
export default class MiPie extends  PureComponent{
	constructor(props){
		super(props)
		this.chart=null;
		this.timer=null;
		this.canvasId = Math.random() + new Date().getTime()+""
		this.state={
			
		}
	}
	
	componentWillReceiveProps(next){
		let {list:list1=[]}=this.props;
		let {list:list2=[]}=next;
		if(list1.length==0&&list2.length>0){
			this.renderChart(list2)
		}
		else{
			if(!_.isEqual(list1,list2)){
				let {chart_config:{source,title,legend,render,coord,pieLabel}}=this.props;
				this.chart.legend({
					...this.setLegend(legend,list2)
				});
				this.chart.changeData(list2)
			}
		}
	}
	setSource=(source)=>{
		let newSource={};
		for(let i in source){
			let item = source[i];
			let newItem={
				...item
			}
			let {formatter,range}=item;
			if(formatter){
				newItem.formatter=(val)=>{
					return formatter.replace(/\{\{item\}\}/g,val)
				}
			}
			if(isNull(range)||(!isNull(range)&&range.length==0)){
				newItem.range=undefined
			}
			newSource[i]=newItem
		}
		return newSource
	}
	setLegend=(legend,data)=>{
		let {position,align,offsetX,offsetY}=legend||{};
		if(isNull(position)){
			position="top"
		}
		return {
			...legend,
			position,
			offsetY,
			itemFormatter:(val)=>{
				return this.legendFormatter(val,data)
			}
		}
	}
	setPieLabel=(pieLabel,data)=>{
		let {label1,label2}=pieLabel||{};
		if(isNull(label1)||isNull(label2)){
			return false
		}
		return {
			...pieLabel,
			label1: function(data, color) {
				let {text,fill}=label1||{};
				if(isNull(text)){
					return {}
				}
				return {
					text: data.month,
					fill: color
				};
			},
			label2:function(data,color){
				let {text,fill}=label2||{};
				if(isNull(text)){
					return {}
				}
				return {
					text:data.temp,
					fill:color
				}
			}
		};
	}
	setTitle=()=>{
		let {chart_config:{title}}=this.props;
		if(!isNull(title)){
			return <div style={{textAlign:"center",width:"100%",paddingTop:"5px"}} dangerouslySetInnerHTML={{__html:title}}></div>;
		}
	}
	setCoord=(coord)=>{
		let {radius,innerRadius,endAngle,startAngle,transposed}=coord||{};
		if(isNull(radius)){
			radius=0.85
		}
		if(isNull(innerRadius)){
			innerRadius=0
		}
		if(isNull(startAngle)){
			startAngle=-180
		}
		if(isNull(endAngle)){
			endAngle=180
		}
		startAngle=(startAngle/180)*Math.PI;
		endAngle=(endAngle/180)*Math.PI
		if(!isNull(transposed)&&transposed==0){
			transposed=false
		}
		else{
			transposed=true
		}
		return {
			...coord,
			transposed,
			radius,
			innerRadius,
			startAngle,
			endAngle,
		}
	}
	legendFormatter=(val,data)=>{
		let {render:{position,groupField},legend:{formatterStr}}=this.props.chart_config;
		position=position.split("*");
		let sum=0,num;
		data.map(i=>{
			sum+=i[position[1]]
			if(i[groupField]===val){
				num=i[position[1]]
			}
		})
		let per = ((num/sum)*100).toFixed(2)+"%"
		let obj={
			per,item:val,value:num
		}
		if(isNull(formatterStr)){
			return val+" "+num+" ("+per+")"
		}
		else{
			return filterTemplate(formatterStr,obj)
		}
	}
	renderChart(data){
		let {chart_config:{source,title,legend,render,coord,pieLabel}}=this.props;
		this.chart.source(data,{
			...this.setSource(source)
		});
		this.chart.coord('polar', {
			...this.setCoord(coord)
		});
		// legend图例
		this.chart.legend({
			...this.setLegend(legend,data)
		});
		this.chart.axis(false);
		// this.chart.guide().html({
		// 	position: ['50%', '45%'],
		// 	html: '<div style="width: 250px;height: 40px;text-align: center;">' + '<div style="font-size: 16px">总资产</div>' + '<div style="font-size: 24px">133.08 亿</div>' + '</div>'
		// });
		//添加饼图文本
		let pieLabelConfig = this.setPieLabel(pieLabel,data)
		if(pieLabelConfig){
			this.chart.pieLabel(pieLabelConfig)
		}
		//posiiton x*y x和y轴分别对应的字段
		//isGroup 0||1是否分组 groupField 分组字段 groupShape 每个分组的曲线样式 	 line实线 dash虚线 smooth曲线 默认都是line

		
		let {position,groupField=""}=render||{};
		let chart=this.chart.interval().position(position).color(groupField).adjust("stack").style({
			lineWidth:1,
			stroke:"#fff",
			lineJoin: 'round',
			lineCap: 'round'
		}).animate({
			appear: {
				duration: 2000,
				easing: 'bounceOut',
				animation: 'groupScaleInXY'
			}
		})
		this.chart.render();
	}
	componentDidMount(){
		let {width} = this.wrapper.getBoundingClientRect();
		let {list,dataset_key,height}=this.props;
		const data =list;
		if(isNull(height)){
			height=window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.618
		}
		this.chart = new F2.Chart({
			id: this.canvasId,
			// width: window.innerWidth,
			width: width,
			height,
			pixelRatio: window.devicePixelRatio
		});
		if(data.length>0){
			this.renderChart(data)
		}
	}
	render(){
		return (
			<div ref={e=>this.wrapper=e}>
				{this.setTitle()}
				<div className="chart-wrapper" >
					<canvas id={this.canvasId}/>
				</div>
			</div>
		)
	}
	componentWillUnmount(){
		clearInterval(this.timer)
	}
}